'use client'

import { BeatLoader } from 'react-spinners'
import { useSearchParams } from 'next/navigation'
import { useCallback, useEffect, useState } from 'react'

import FormError from '@/components/form-error'
import FormSuccess from '@/components/form-success'
import CardWrapper from "@/components/auth/card-wrapper"
import { newVerification } from '@/actions/new-verification'

const NewVerificationForm = () => {
    const [error, setError] = useState<string | undefined>()
    const [success, setSuccess] = useState<string | undefined>()

    const searchParams = useSearchParams()
    const token = searchParams.get('token')

    const onSubmit = useCallback(() => {
        if (!token) {
            setError('Missing token!')
            return
        }
        newVerification(token)
            .then(data => {
                setError(data.error)
                setSuccess(data.success)
            })
            .catch(() => {
                setError('An error occurred!')
            })
    }, [token])

    useEffect(() => {
        onSubmit()
    }, [onSubmit])

    return (
        <CardWrapper
            headerLabel="Confirming your verification"
            backButtonLabel="Back to login"
            backButtonPath="/auth/login"
        >
            <div className="flex items-center w-full justify-center">
                {!success && !error && <BeatLoader />}
                <FormSuccess message={success} />
                {!success && <FormError message={error} />}
            </div>
        </CardWrapper>
    )
}

export default NewVerificationForm